<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <!-- 设置字符编码为 UTF-8 -->
    <meta charset="utf-8"/>
    <!-- 设置页面的视口，确保页面在不同设备上的显示效果一致 -->
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
          name="viewport">
    <!-- 设置页面标题 -->
    <title>中国人口普查数据管理</title>
    <!-- 引入 jQuery 库 -->
    <script th:src="@{/echarts/jquery-1.11.1.min.js}"></script>
    <!-- 引入 Layui 框架的 CSS 文件 -->
    <link media="all" rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <!-- 引入 Layui 框架的 JavaScript 文件 -->
    <script charset="utf-8" th:src="@{/layui/layui.js}"></script>
    <style>
        body {
            /* 设置页面主体的外边距为 10px */
            margin: 10px;
        }

        /* 为按钮添加右外边距 */
        button {
            margin-right: 10px;
        }

        /* 移除最后一个按钮的右外边距 */
        button:last-child {
            margin-right: 0;
        }

        .demo-carousel {
            /* 设置轮播图的高度为 200px */
            height: 200px;
            /* 设置轮播图的行高为 200px，使文本垂直居中 */
            line-height: 200px;
            /* 设置轮播图的文本水平居中 */
            text-align: center;
        }

        .layui-form-label {
            float: left;
            display: block;
            padding: 9px 15px;
            width: 100px;
            font-weight: 400;
            line-height: 20px;
            text-align: right
        }

        .my-layui-inline .layui-form-label{
            padding-bottom: 20px;
        }

        .my-layui-inline .layui-input-inline{
            padding-bottom: 20px;
        }
    </style>
</head>
<body class="childrenBody">
<!-- 模态窗：添加、修改 -->
<div id="updateDiv" style="display: none;padding: 10px;padding-right: 5%">
    <!-- 表单，用于添加或修改人口数据 -->
    <form action="" class="layui-form" id="updateFrm" lay-filter="updateFrm" method="post">
        <!-- 隐藏的输入框，用于传递数据的 ID -->
        <input name="id" type="hidden" value="">

        <div class="my-layui-inline">
            <!-- 普查时间的标签 -->
            <label class="layui-form-label">普查时间</label>
            <div class="layui-input-inline">
                <!-- 普查时间的下拉选择框 -->
                <select lay-verify="required" name="censusTime">
                    <option value="">请选择普查时间</option>
                    <option value="FIRST">第一次人口普查</option>
                    <option value="SECOND">第二次人口普查</option>
                    <option value="THIRD">第三次人口普查</option>
                    <option value="FOURTH">第四次人口普查</option>
                    <option value="FIFTH">第五次人口普查</option>
                    <option value="SIXTH">第六次人口普查</option>
                    <option value="SEVENTH">第七次人口普查</option>
                </select>
            </div>
        </div>

        <div class="my-layui-inline">
            <!-- 省份名称的标签 -->
            <label class="layui-form-label">省份名称</label>
            <div class="layui-input-inline">
                <!-- 省份名称的输入框，必填项 -->
                <input class="layui-input input-radius" lay-verify="required" name="cityName" placeholder="请输入省份名称"
                       type="text">
            </div>
        </div>

        <div class="my-layui-inline">
            <!-- 常住人口的标签 -->
            <label class="layui-form-label">常住人口(万人)</label>
            <div class="layui-input-inline">
                <!-- 常住人口的输入框，必填项 -->
                <input class="layui-input input-radius" lay-verify="required" name="population" placeholder="请输入常住人口"
                       type="text">
            </div>
        </div>

        <div class="my-layui-inline">
            <!-- 出生人口的标签 -->
            <label class="layui-form-label">出生人口(万人)</label>
            <div class="layui-input-inline">
                <!-- 出生人口的输入框，必填项 -->
                <input class="layui-input input-radius" lay-verify="required" name="birthNum" placeholder="请输入出生人口"
                       type="text">
            </div>
        </div>

        <div class="my-layui-inline">
            <!-- 死亡人口的标签 -->
            <label class="layui-form-label">死亡人口(万人)</label>
            <div class="layui-input-inline">
                <!-- 死亡人口的输入框，必填项 -->
                <input class="layui-input input-radius" lay-verify="required" name="deadNum" placeholder="请输入死亡人口"
                       type="text">
            </div>
        </div>

        <div class="my-layui-inline">
            <!-- 性别比的标签 -->
            <label class="layui-form-label">性别比(女=100)</label>
            <div class="layui-input-inline">
                <!-- 性别比的输入框，必填项 -->
                <input class="layui-input input-radius" lay-verify="required" name="sexRatio" placeholder="请输入性别比"
                       type="text">
            </div>
        </div>

        <div class="my-layui-inline">
            <!-- 统计时间的标签 -->
            <label class="layui-form-label">统计时间</label>
            <div class="layui-input-inline">
                <!-- 统计时间的输入框，必填项 -->
                <input type="text" class="layui-input" id="stopTime" name="updateTime" placeholder="yyyy-MM-dd HH:mm:ss">
            </div>
        </div>

        <div class="my-layui-inline" style="padding-left: 10%">
            <!-- 修改按钮 -->
            <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal" lay-filter="doUpdate" lay-submit=""
                    type="button">
                <i class="layui-icon layui-icon-add-1"></i>更新
            </button>

            <!-- 重置按钮 -->
            <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-warm" lay-filter="doSearch" lay-submit=""
                    type="reset">
                <i class="layui-icon layui-icon-refresh"></i><span>重置</span>
            </button>
        </div>
    </form>
</div>

<!-- 搜索条件表单 -->
<div style="padding-top: 10px;margin-bottom: 50px">
    <!--查询条件-->
    <fieldset class="layui-elem-field layui-field-title">
        <legend>搜索条件</legend>
    </fieldset>
    <!-- 搜索条件表单 -->
    <form action="" class="layui-form" id="searchFrm" lay-filter="searchFrm" method="post">
        <div class="layui-inline">
            <!-- 省份名称的标签 -->
            <label class="layui-form-label">省份名称</label>
            <div class="layui-input-inline">
                <!-- 省份名称的输入框，用于输入查询的省份名称 -->
                <input class="layui-input input-radius" id="cityName" name="cityName" placeholder="请输入省份名称"
                       type="text">
            </div>
            <div class="layui-inline">
                <!-- 普查时间的标签 -->
                <label class="layui-form-label">普查时间</label>
                <div class="layui-input-inline">
                    <!-- 普查时间的下拉选择框 -->
                    <select lay-verify="" name="censusTime">
                        <option value="">请选择普查时间</option>
                        <option value="FIRST">第一次人口普查</option>
                        <option value="SECOND">第二次人口普查</option>
                        <option value="THIRD">第三次人口普查</option>
                        <option value="FOURTH">第四次人口普查</option>
                        <option value="FIFTH">第五次人口普查</option>
                        <option value="SIXTH">第六次人口普查</option>
                        <option value="SEVENTH">第七次人口普查</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-inline" style="padding-left: 10%">
            <!-- 查询按钮 -->
            <button class="layui-btn layui-btn-sm layui-btn-radius" lay-filter="doSearch" lay-submit="" type="button">
                <i class="layui-icon layui-icon-search"></i>查询
            </button>
            <!-- 重置按钮 -->
            <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-warm" lay-filter="doSearch" lay-submit=""
                    type="reset">
                <i class="layui-icon layui-icon-refresh"></i><span>重置</span>
            </button>
            <!-- 导出 Excel 文件的按钮 -->
<!--            <button class="layui-btn layui-btn-sm layui-btn-radius" lay-filter="doOutPutExcel" lay-submit=""-->
<!--                    type="button">-->
<!--                <i class="layui-icon">&#xe641;</i>导出.xlsx文件-->
<!--            </button>-->
            <!-- 导出 Excel 文件的按钮 -->
            <button class="layui-btn layui-btn-sm layui-btn-radius" id="doOutPutExcel" type="button">
                <i class="layui-icon">&#xe641;</i>导出.xlsx文件
            </button>
        </div>
    </form>
    <br>
    <hr>
    <!-- 文件上传的区域 -->
    <div class="layui-upload-drag" id="test10">
        <i class="layui-icon"></i>
        <p>点击上传，或将文件拖拽到此处</p>
        <div class="layui-hide" id="uploadDemoView">
            <hr>
        </div>
    </div>
    <!-- 表格，用于显示查询结果 -->
    <table class="layui-hide" id="demo" lay-filter="test"></table>
</div>
<!-- 引入公共菜单的 JavaScript 代码片段 -->
<div th:insert="commonmenu :: layuicommonscript"></div>

<!-- 编辑、删除操作的模板 -->
<script id="barDemo" type="text/html">
    <!-- 编辑按钮 -->
    <button type="button" lay-event="update" class="layui-btn layui-btn-sm layui-btn-radius">
        <i class="layui-icon layui-icon-edit"></i>编辑
    </button>
    <!-- 删除按钮 -->
    <button type="button" lay-event="delete" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger">
        <i class="layui-icon layui-icon-delete"></i>删除
    </button>
</script>

<!-- 自定义模板，包含新增、批量删除按钮 -->
<script id="toolbarDemo" type="text/html">
    <div class="layui-btn-container">
        <!-- 新增按钮 -->
        <button class="layui-icon layui-icon-add-1" lay-event="add">新增</button>
        <!-- 批量删除 -->
        <button class="layui-icon layui-icon-delete" lay-event="batchDelete">批量删除</button>
    </div>
</script>

<script>
    layui.config({
        version: '1632428048355' //为了更新 js 缓存，可忽略
    });

    var tableIns;
    var mainIndex;

    //加载模块
    layui.use(["upload", "jquery"], function () { //亦可加载特定模块：layui.use(['layer', 'laydate', function(){
        //得到各种内置组件
        var layer = layui.layer //弹层
            , upload = layui.upload //拖拽上传
            , $ = layui.jquery
            , laypage = layui.laypage //分页
            , laydate = layui.laydate //日期
            , table = layui.table //表格
            , element = layui.element //元素操作
            , dropdown = layui.dropdown //下拉菜单
            , form = layui.form //表单

        //日期时间选择器
        laydate.render({
            elem: '#stopTime'
            ,type: 'datetime'
        });

        //向世界问个好
        // layer.msg('Hello World');

        //监听Tab切换
        element.on('tab(demo)', function (data) {
            layer.tips('切换了 ' + data.index + '：' + this.innerHTML, this, {
                tips: 1
            });
        });

        //拖拽上传
        upload.render({
            elem: '#test10'
            , url: '/china/excelImportChina' //此处用实际使用时自己的上传接口即可。
            , accept: 'file' //普通文件
            , done: function (res) {
                layer.msg(res.msg);
                console.log(res)
                tableIns.reload({
                    where: "",
                });
            }
        });

        //导出Excel数据
        // form.on("submit(doOutPutExcel)", function () {
        //     window.location.href = "/china/excelOutPutChina";
        // })

        //执行一个 table 实例
        tableIns = table.render({
            elem: '#demo'
            // , height: 564
            , height: "full-300"
            , url: '/china/listDataByPage' //数据接口
            , title: '中国普查人口数据表'
            , page: true, // 开启分页
            limit: 10, // 每页显示的记录数
            limits: [10, 20, 30] // 每页显示记录数的可选值
            , toolbar: '#toolbarDemo' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , totalRow: false //开启合计行
            , cols: [ [ //表头
                {type: 'checkbox', fixed: 'left'}
                , {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left', totalRowText: '合计：', hide: true}
                , {field: 'cityName', title: '省份名称', width: 150}
                , {field: 'population', title: '常住人口(万人)', width: 150, sort: true}
                , {field: 'birthNum', title: '出生人口(万人)', width: 150, sort: true}
                , {field: 'deadNum', title: '死亡人口(万人)', width: 150, sort: true}
                , {field: 'sexRatio', title: '性别比(女 = 100)', width: 150, sort: true}
                , {field: 'updateTime', title: '统计时间', width: 260, sort: true}
                , {
                    field: 'censusTime', title: '普查时间', width: 360, sort: true, templet: function (d) {
                        if (d.censusTime == 'FIRST') {
                            return '<span>第一次全国人口普查</span>';
                        } else if (d.censusTime == 'SECOND') {
                            return '<span>第二次全国人口普查</span>';
                        } else if (d.censusTime == 'THIRD') {
                            return '<span>第三次全国人口普查</span>';
                        } else if (d.censusTime == 'FOURTH') {
                            return '<span>第四次全国人口普查</span>';
                        } else if (d.censusTime == 'FIFTH') {
                            return '<span>第五次全国人口普查</span>';
                        } else if (d.censusTime == 'SIXTH') {
                            return '<span>第六次全国人口普查</span>';
                        } else if (d.censusTime == 'SEVENTH') {
                            return '<span>第七次全国人口普查</span>';
                        } else {
                            return '<span>未知普查</span>';
                        }
                    }
                }
                , {fixed: 'right', width: 200, align: 'center', toolbar: '#barDemo'}
            ] ],
            request: {
                pageName: 'page', // 页码的参数名称，默认：page
                limitName: 'limit' // 每页数据量的参数名，默认：limit
            },
            parseData: function (res) { // 解析接口返回的数据
                return {
                    "code": res.code, // 状态码，0 表示成功
                    "msg": res.msg, // 提示信息
                    "count": res.count, // 总记录数
                    "data": res.data // 数据列表
                };
            },done: function (res, curr, count) {
                laypage.render({
                    elem: 'pageDemo',
                    count: count,
                    limit: 10,
                    skin: '#1E9FFF',
                    jump: function (obj, first) {
                        if (!first) {
                            layer.msg('第' + obj.curr + '页', {offset: 'b'});
                        }
                    }
                });
            }
        });

        // 前端完整导出函数（带错误处理）
        $('#doOutPutExcel').on('click', function() {
            if (!tableIns) {
                layer.msg('表格未初始化，请刷新页面');
                return;
            }

            var fileName = tableIns.config.title.trim();
            if (!fileName) {
                layer.msg('表格标题为空，无法生成文件名');
                return;
            }

            fileName += '.xlsx';
            var encodedFileName = encodeURIComponent(fileName);

            // 验证文件名合法性（可选）
            if (!/^[\u4e00-\u9fa5a-zA-Z0-9_.-]+$/.test(fileName)) {
                layer.msg('文件名包含非法字符，请检查表格标题');
                return;
            }

            window.location.href = `/china/excelOutPutChina?fileName=${encodedFileName}`;
        });

        //添加(更新)、批量删除    监听头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id)
            var data = checkStatus.data; //获取选中的数据
            switch (obj.event) {
                case 'add':
                    // layer.msg('添加');
                    //调出弹窗
                    openUpdateLayer();
                    break;
                case 'batchDelete':
                    if (data.length === 0) {
                        layer.msg('请至少选择一行');
                    } else {
                        layer.confirm('真的要删除选中的 ' + data.length + ' 条数据吗？', {
                            btn: ['删除', '取消']
                        }, function (index) {
                            // 发送批量删除请求
                            $.ajax({
                                url: '/china/batchDelete',
                                type: 'POST',
                                contentType: 'application/json',
                                data: JSON.stringify(data.map(item => item.id)),
                                success: function (res) {
                                    if (res.code === 200) {
                                        layer.msg('批量删除成功', {icon: 1});
                                        tableIns.reload(); // 刷新表格
                                    } else {
                                        layer.msg('批量删除失败：' + res.msg, {icon: 5});
                                    }
                                },
                                error: function (xhr, status, error) {
                                    layer.msg('网络请求失败，请重试', {icon: 5});
                                }
                            });
                        });
                    }
                    break;
            }
        });

        //删除和编辑    监听行工具事件
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'update') {
                // 更新的逻辑代码
                openUpdateLayer(data)
            } else if (layEvent === 'delete') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del(); //删除对应行（tr）的DOM结构
                    //向服务端发送删除指令
                    $.post("/china/deleteById", {id: data.id}, function (res) {
                        if (res.code == 200) {
                            tableIns.reload({
                                where: "",
                            });
                        }
                        layer.msg(res.msg)
                    })
                    layer.close(index);
                });
            }
        });

        //新增、修改数据请求(更新数据请求)
        form.on("submit(doUpdate)", function (data) {
            $.post('/china/addOrUpdateChina', data.field, function (res) {
                if (res.code == 200) {
                    tableIns.reload();
                }
                layer.msg(res.msg);
                layer.close(mainIndex);
            }).error(function () {
                layer.msg('请求出错，请稍后重试');
            });
            return false;
        })

        //模态窗 ‘页面层’(新增、编辑)
        function openUpdateLayer(data) {
            // 如果传入了 data，表示是修改操作，否则是新增操作
            if (data) {
                // 修改操作，填充表单数据
                $('#updateFrm input[name="id"]').val(data.id);
                $('#updateFrm input[name="cityName"]').val(data.cityName);
            } else {
                // 新增操作，清空 id 字段
                $('#updateFrm input[name="id"]').val('');
                // 清空其他字段的值
                $('#updateFrm input[name="cityName"]').val('');
            }
            // 打开弹窗
            mainIndex = layer.open({
                type: 1,
                // skin: 'layui-layer-rim', //加上边框
                title: data ? '修改人口信息' : '新增人口信息',
                content: $("#updateDiv"),
                area: ['435px', '520px'], // 宽高
                success: function () {
                    $("#updateFrm")[0].reset(); // 清空弹窗缓存
                    // 回显其他数据，假设表单中有对应的字段
                    form.val("updateFrm", data);
                },
                shadeClose: true// 点击遮罩关闭层
            })
        }

        // 监听搜索按钮点击事件
        $('#searchFrm').on('submit', function (e) {
            e.preventDefault();
            var cityName = $('#cityName').val();
            var censusTime = $('select[name="censusTime"]').val();
            tableIns.reload({
                where: {
                    cityName: cityName,
                    censusTime: censusTime
                },
                page: {
                    curr: 1 // 重新从第 1 页开始
                }
            });
        });

        //模糊查询
        form.on("submit(doSearch)", function (data) {
            tableIns.reload({
                where: data.field,
                page: {
                    curr: 1
                }
            });
            return false;
        })

        //分页
        laypage.render({
            elem: 'pageDemo' //分页容器的id
            , count: 1000 //数据总数
            , limit: 10 //每页显示的数据条数
            , skin: '#1E9FFF' //自定义选中色值
            // , layout: ['prev', 'page', 'next', 'count', 'limit', 'refresh', 'skip'] //自定义排版
            , jump: function (obj, first) {
                if (!first) {
                    layer.msg('第' + obj.curr + '页', {offset: 'b'});
                }
            }
        });
    })
</script>
</body>
</html>
